<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><div id="myApp">
<title>Document</title>
</head>
<body>
<div id="myApp">
    <h3>v-route路由</h3>
    <nav>
        <router-link to="/home">首页</router-link>
        <router-link to="/news">新闻页</router-link>
        <router-link to="/product">产品页</router-link>
        <router-link to="/about">关于我们</router-link>
    </nav>
    <router-view></router-view>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript">
/* 模板 */
var home = { template: '<p>这里是首页组件</p>' };
var news = { template: '<p>这里是新闻中心</p>' };
var product = { template: '<p>这里是产品页面</p>' };
var about = { template: '<p>这里是关于我们</p>' };
/* 配置路由 */
var routes = [
    {path: '/', redirect: '/home'}, // 默认路由
    {path: '/home', component: home},
    {path:'/news',component:news},
    {path:'/product',component:product},
    {path:'/about',component:about},
];
// 创建路由实例
var router = new VueRouter({
    routes:routes
});
var myApp = new Vue({
    el:"#myApp",
    router
});
</script>
</body>
</html>